<template>
  <div class="container">
    <div class="header1" style="padding: 10px; background-color: white; border: solid 1px #e2e2e2; margin-bottom: 15px">
      <div style="display: flex; justify-content: flex-start"></div>
      <div style="display: flex; justify-content: flex-end">
        <a-button class="hte-btn del-btn" @click="processHandoverPath">发起交接</a-button>
      </div>
    </div>
    <div class="content-list">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <section>
          <div class="section-header">基础信息</div>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item label="原处理人:" prop="originalAssignee">
                <a-input v-model="form.originalAssignee" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="交接人:" prop="assignee">
                <a-input v-model="form.assignee" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="交接事宜:" prop="remark">
                <a-textarea
                v-model="form.remark"
                placeholder="请填写交接事宜"
                :auto-size="{ minRows: 2, maxRows: 10 }"
              />
              </a-form-model-item>
            </a-col>
          </a-row>
        </section>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { Modal } from 'ant-design-vue'
export default {
  components: {},
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      rules: {
        originalAssignee: [{ required: true, message: '请输入', trigger: 'blur' }],
        assignee: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      urls: {
        processHandoverPath: '/flow/processHandoverPath',
      },
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    async processHandoverPath() {
      let valid = await this.$refs.ruleForm.validate()
      if (!valid) {
        this.$messageWorkReport.warning('请根据提示将表单填写完整')
        return false
      }
      let that = this
      Modal.confirm({
        title: '提醒',
        content: '是否确认发起流程交接',
        onOk() {
          getAction(that.urls.processHandoverPath, that.form).then((res) => {
            if (res.success) {
              that.$message.success('交接成功')
            } else {
              that.$message.error('交接失败' + res.message)
            }
          })
        },
        onCancel() {},
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.container {
  .content {
    margin-top: 20px;

    section {
      margin-bottom: 18px;

      .section-table {
        .add-btn {
          margin-left: 0;
          margin-bottom: 10px;
        }

        /deep/ .a-upload__input {
          display: none !important;
        }
      }
    }
  }
}

.tips-box {
  margin-top: 32px;

  .add-btn {
    width: 180px;
    height: 40px;
    line-height: 40px;
    background-color: #4095e4;
    border-radius: 2px;
  }
}

/deep/ .el-upload__input {
  display: none !important;
}
</style>
